<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
        <basic-container class="title">应收账单详情</basic-container>
        <basic-container>
            <h2 class="io-goods-detail">
                基础信息
            </h2>
            <template>
                <el-row class="io-goods-detail basic-information">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">结算单号:{{basicInformation.settlementSn}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-light">客户名称:{{basicInformation.customerName}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">创建日期:{{basicInformation.buyDate}}</div>
                    </el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">是否结算:{{basicInformation.status}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-light">付款人:{{basicInformation.payerName}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">付款方式:{{basicInformation.payType}}</div>
                    </el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">付款金额:{{basicInformation.buyerPayment}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-light">类型:{{basicInformation.billType}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">原订单号:{{basicInformation.buyId}}</div>
                    </el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                    <el-col :span="6">
                        <div class="grid-content bg-purple checkCer">查看付款凭证</div>
                    </el-col>
                </el-row>
            </template>
        </basic-container>
        <basic-container>
            <h2 class="io-goods-detail">
                订单商品清单
            </h2>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                    <el-table-column
                            label="序号"
                            prop="id"
                            align="center"
                            type="index">
                    </el-table-column>
                    <el-table-column
                            label="商品名称"
                            prop="productName"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="单位"
                            prop="unit"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="发货数量"
                            prop="shipmentNum"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="发货单价"
                            prop="univalenc"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="发货金额"
                            prop="money"
                            align="center">
                    </el-table-column>
                </el-table>
                <h3 class="settle-accounts">合计账单金额:{{calcMoney}}</h3>
            </template>
        </basic-container>
        <!--<basic-container>-->
            <!--<h2 class="io-goods-detail">-->
                <!--单据操作历史-->
            <!--</h2>-->
            <!--<template>-->
                <!--<el-table-->
                        <!--:data="tableData"-->
                        <!--style="width: 100%"-->
                        <!--:header-cell-style="{background:'#eef1f6',color:'#606266'}">-->
                    <!--<el-table-column-->
                            <!--label="序号"-->
                            <!--prop="id"-->
                            <!--align="center"-->
                            <!--type="index">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="操作时间"-->
                            <!--prop=" operationTime"-->
                            <!--align="center">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="操作人"-->
                            <!--prop="operator"-->
                            <!--align="center">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="类型"-->
                            <!--prop="operatorType"-->
                            <!--align="center">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="日志"-->
                            <!--prop="operatorLog"-->
                            <!--align="center">-->
                    <!--</el-table-column>-->
                <!--</el-table>-->
                <!--<div class="return-btn">-->
                    <!--<el-button type="primary" plain @click="backup">返回</el-button>-->
                <!--</div>-->
            <!--</template>-->
        <!--</basic-container>-->
    </div>
</template>
<!-- 应收账单 -->
<script>
    import {
        mapGetters
    } from 'vuex'

    export default {
        name: 'addpurchaseback',
        data() {
            return {
                tableData: [],
                //     {
                //         goodsImg: 'http://i2.tiimg.com/684003/5bbcef207e546891.png',
                //         goods: '测试商品',
                //         unit: '斤',
                //         num: 12,
                //         price: 2.2,
                //         money: 28.4,
                //         desc: ''
                //     }, {
                //         goodsImg: 'http://i2.tiimg.com/684003/5bbcef207e546891.png',
                //         goods: '测试商品',
                //         unit: '斤',
                //         num: 12,
                //         price: 2.2,
                //         money: 28.4,
                //         desc: ''
                //     }, {
                //         goodsImg: 'http://i2.tiimg.com/684003/5bbcef207e546891.png',
                //         goods: '测试商品',
                //         unit: '斤',
                //         num: 12,
                //         price: 2.2,
                //         money: 28.4,
                //         desc: ''
                //     },
                //     {
                //         goodsImg: 'http://i2.tiimg.com/684003/5bbcef207e546891.png',
                //         goods: '测试商品',
                //         unit: '斤',
                //         num: 12,
                //         price: 2.2,
                //         money: 28.4,
                //         desc: ''
                //     }
                // ],
                calcMoney: 1000,
                basicInformation: {
                    settlementSn: 'POI10000',
                    customerName: '待审核',
                    buyDate: '平台直购',
                    status: '浩瀚小店',
                    payerName: '2019-03-09',
                    buyerPayment: '运营',
                    billType: '张**',
                    buyId: '张**'
                },
            }
        },
        created(){
            this.init();
        },
        computed: {
            ...mapGetters(['permissions'])
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            backup: function () {
                this.$router.go(-1);
            },
            init(){
                this.basicInformation = this.$route.query.row
                // 商品详情
            }
        }
    }
</script>

<style lang="scss" scoped>
    .io-goods-detail {
        margin-left: 10px;
    }

    .settle-accounts {
        text-align: right;
    }

    .basic-information {
        margin-top: 20px;
        font-weight: inherit;
    }

    .return-btn {
        height: 100px;
        width: 100%;
        text-align: center;
        line-height: 100px;
    }

    .title {
        text-align: center;
        font-size: 26px;
    }

    .demo-form-inline {
        margin-top: 20px;
    }

    .yuan {
        display: inline-block;
        padding-right: 20px;
        line-height: 40px;
    }

    .settle-accounts {
        margin-top: 20px;
    }

    .certificate {
        margin-top: 20px;
    }

    .explain {
        font-size: 12px;
        color: #999;
    }

    .checkCer {
        color: blue;
    }

</style>
